import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from "react"
import OptionBarBtn from "../../../components/option-bar-btn/OptionBarBtn";
import SymbolPopover from "../../../components/popover/SymbolPopover";
import useReSize from "../../../hooks/useResize";
import comDocContext from '../../../context/DocContext';
import ExportPopover from './../../../components/popover/ExportPopover';

interface Props {
    getExcelExportParams: Function
}

const ExcelExtraToolsOptionBar = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        
    }))

    const {
        comDocInstance,
    } = useContext(comDocContext);

    const {
        getExcelExportParams
    } = props;

    const containerRef = useRef(null);

    const containerSize = useReSize(containerRef);

    const symbolPopoverRef = useRef(null);

    const symbolBtnRef = useRef(null);

    const [symbolPopoverPosition, setSybolPopoverPosition] = useState({ clientX: 0, clientY: 0 });

    const handleOpenSymbolPopover = () => {
        symbolPopoverRef.current.openPopover();
    }

    // useEffect(() => {
    //     // const clientRect = symbolBtnRef.current.getBoundingClientRect();
    //     // const { top, left } = clientRect;
    //     // setSybolPopoverPosition({ clientX: left - 220, clientY: top + 64 })
    // }, [containerSize])

    const exportPopoverRef = useRef(null);

    const exportBtnRef = useRef(null);

    const [exportPopoverPosition, setExportPopoverPosition] = useState({ clientX: 0, clientY: 0 })

    const handleOpenExportPopover = () => {
        exportPopoverRef.current.openPopover();
    }

    useEffect(() => {
        const clientRect = exportBtnRef.current?.getBoundingClientRect();
        const { top, left } = clientRect;
        setExportPopoverPosition({ clientX: left - 25, clientY: top + 64 })
    }, [containerSize])

    const _getExcelExportParams = () => {
        const params = getExcelExportParams();
        return params;
    }

    return (
        <div
            ref={containerRef}
            className='edit-page-option-row-item flex-col'
            style={{ width: '110px' }}
        >
            <div className='edit-page-option-row-half flex-row' style={{ height: '100%' }}>
                <div
                    ref={exportBtnRef}
                >
                    <OptionBarBtn
                        icon={<i style={{ fontSize: '21px' }} className='iconfont-1 ghzs-gray-daochuword' />}
                        size={'large'}
                        name={'导出'}
                        onClick={handleOpenExportPopover}
                    />
                </div>
                {/* <OptionBarBtn
                    icon={<i style={{ fontSize: '24px' }} className='iconfont ghzs-color-a-bianzu27' />}
                    size={'large'}
                    name={'查找'}
                /> */}
                {/* <OptionBarBtn
                    icon={<i style={{ fontSize: '20px' }} className='iconfont-1 ghzs-gray-tihuan' />}
                    size={'large'}
                    name={'替换'}
                /> */}
                <div
                    ref={symbolBtnRef}
                >
                    <OptionBarBtn
                        icon={<i style={{ fontSize: '20px' }} className='iconfont-1 ghzs-gray-fuhao' />}
                        size={'large'}
                        name={'符号'}
                        onClick={handleOpenSymbolPopover}
                    />
                </div>
            </div>
            <SymbolPopover
                ref={symbolPopoverRef}
                clientX={symbolPopoverPosition.clientX}
                clientY={symbolPopoverPosition.clientY}
            />
            <ExportPopover
                ref={exportPopoverRef}
                clientX={exportPopoverPosition.clientX}
                clientY={exportPopoverPosition.clientY}
                type={'excel'}
                exportExcel={_getExcelExportParams}
                comDocInstance={comDocInstance}
            />
        </div>
    )
}


export default forwardRef(ExcelExtraToolsOptionBar);
